<template>
    <div class="sellerTransaction app-container">
      <div class="flowChart __page">
        <div class="FC_item_img">
          <!-- <img src="@/assets/release/xxfb.4eae4f9c.png" alt=""> -->
        </div>
        <!-- <div class="FC_item_set">
          <div class="set">
            <i class="el-icon-setting"></i>
          </div>
          <div class="word">表头设置</div>
        </div> -->
      </div>
      <div class="table_box __page">
        <el-table
          :data="tableData"
          border
          stripe
          height="600"
          style="width: 100%">
          <el-table-column label="标的名称" align="center" width="180">
            <el-table-column align="center" width="180">
              <template slot="header">
                <el-input
                  v-model="lotsName"
                  size="mini"/>
              </template>
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="所属拍卖会" align="center" width="200">
            <el-table-column align="center" width="200">
              <template slot="header">
                <el-input
                  v-model="owningAuction"
                  size="mini"/>
              </template>
              <template slot-scope="scope">
                <span>{{scope.row.auction_name}}</span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="处置单位" align="center" width="200">
            <el-table-column align="center" width="200">
              <template slot="header">
                <el-input
                  v-model="disposalUnit"
                  size="mini"/>
              </template>
              <template slot-scope="scope">
                <span>{{scope.row.dispose_unit}}</span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="处置地点" align="center" width="280">
            <el-table-column align="center" width="280">
              <template slot="header">
                <el-input
                  v-model="disposePlace"
                  size="mini"/>
              </template>
              <template slot-scope="scope">
                <span>{{scope.row.address}}</span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="时间" align="center" width="280">
            <el-table-column align="center" width="280">
              <template slot="header">
                <el-date-picker
                  v-model="startEndTime"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  size="mini"
                  style="width: 100%;">
                </el-date-picker>
              </template>
              <template slot-scope="scope">
                <span>{{scope.row.create_time}}</span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="竞价状态" align="center" width="150">
            <el-table-column align="center"  width="150">
              <template slot="header">
                <el-select v-model="biddingState" placeholder="请选择" size="mini">
                  <el-option
                    v-for="item in biddingStateoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </template>
              <template slot-scope="scope">
                <span v-if="scope.row.status=='1'">即将开始</span>
                <span v-else-if="scope.row.status=='2'">正在进行</span>
                <span v-else-if="scope.row.status=='3'">已结束</span>
            </template>
            </el-table-column>
          </el-table-column>
          <el-table-column fixed="right" align="center" width="120">
            <template slot="header">
              <el-dropdown>
                <span class="el-dropdown-link">
                  定标登记<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="99">全部</el-dropdown-item>
                  <el-dropdown-item command="0">待定标</el-dropdown-item>
                  <el-dropdown-item command="1">审核中</el-dropdown-item>
                  <el-dropdown-item command="2">已成交</el-dropdown-item>
                  <el-dropdown-item command="3">已撤拍</el-dropdown-item>
                  <el-dropdown-item command="4">已流标</el-dropdown-item>
                  <el-dropdown-item command="5">请定标</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_calibration=='0'" disabled type="info" size="mini">待定标</el-button>
              <el-button v-else-if="scope.row.is_calibration==1" disabled type="info" size="mini">审核中</el-button>
              <el-button v-else-if="scope.row.is_calibration==5" type="primary" size="mini" @click="picketageStart(scope.row)">请定标</el-button>
              <el-button v-else-if="scope.row.is_calibration==2" type="success" size="mini" @click="picketageStart(scope.row)">已成交</el-button>
              <el-button v-else-if="scope.row.is_calibration==3" type="danger" size="mini">已撤拍</el-button>
              <el-button v-else-if="scope.row.is_calibration==4" type="warning" size="mini">已流标</el-button>
            </template>
          </el-table-column>
          <el-table-column label="交割登记" fixed="right" align="center" width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_calibration !==2" type="info" size="mini" disabled>待登记</el-button>
              <el-button v-if="scope.row.is_calibration==2&&scope.row.deliveryNumber==0" type="primary" size="mini" @click="jgRegisterBtn(scope.row)">请登记</el-button>
              <el-button v-if="scope.row.is_calibration==2&&scope.row.deliveryNumber>0" type="success" size="mini" @click="jgRegisterBtn(scope.row)">已登记({{scope.row.deliveryNumber}})</el-button>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" width="120">
            <template slot="header">
              <el-dropdown>
                <span class="el-dropdown-link">
                  结算登记<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="99">全部</el-dropdown-item>
                  <el-dropdown-item command="1">请登记</el-dropdown-item>
                  <el-dropdown-item command="2">待登记</el-dropdown-item>
                  <el-dropdown-item command="3">已结算</el-dropdown-item>
                  <el-dropdown-item command="4">完成结算</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
            <template slot-scope="scope">
              <el-button v-if="scope.row.is_calibration !==2" type="info" size="mini" disabled>待登记</el-button>
              <el-button v-else-if="scope.row.is_calibration==2&&scope.row.is_statement==0" type="primary" size="mini" @click="settleAccounts(scope.row)">请登记</el-button>
              <el-button v-else-if="scope.row.is_calibration==2&&scope.row.is_statement>0" type="success" size="mini" @click="settleAccounts(scope.row)">完成结算</el-button>
            </template>
          </el-table-column>
          <el-table-column label="买受人评价" fixed="right" align="center" width="120">
            <template slot-scope="scope">
              <el-button  v-if="scope.row.is_calibration !==2" type="info" size="mini" disabled>未评价</el-button>
              <el-button v-else-if="scope.row.is_calibration==2&&scope.row.is_score==0" type="primary" size="mini" @click="pleaseEvaluate(scope.row)">请评价</el-button>
              <el-button v-else-if="scope.row.is_calibration==2&&scope.row.is_score==1" type="success" size="mini" @click="pleaseEvaluate(scope.row)">已评价</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[7, 20, 30, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      
      <!-- 定标弹窗 -->
      <picketage 
      :titleDia="titleDia"
      :showWin="showWin"
      :onlyOne="onlyOne"
      :idRow="idRow"
      @closePicketage="closePicketage"
      @successPicketage="successPicketage"
      />

      <!-- 交割登记弹窗 -->
      <jgRegister 
      :jgShow="jgShow"
      :idRow="idRow"
      :jsIds="jsIds"
      @closejgRegisterLog="closejgRegisterLog"
      />
      <!-- 结算登记 -->
      <jsAccounts
      :settleShow="settleShow"
      :idRow="idRow"
      :isStatement="isStatement"
      @closeSettleLog="closeSettleLog"
      />




      <buyerEvaluate 
      :buyerShow="buyerShow"
      :idRow="idRow"
      :isScore="isScore"
      @closeBuyer="closeBuyer"
      @evaluateSuccess="evaluateSuccess"
      />

    </div>
  </template>
  
  <script>
  import jgRegister from './jgRegister.vue'
  import picketage from './dialog/dialog.vue'
  import buyerEvaluate from './buyerEvaluate.vue'
  import {Ledgerlist} from '@/api/release'
  import jsAccounts from './jsDialog/jsAccounts.vue'
  export default {
    name: 'sellerTransaction',
    components:{
      picketage,jgRegister,jsAccounts,buyerEvaluate
    },
    data(){
      return{
        lotsName:"", //标的名称输入框
        owningAuction:"",//所属拍卖会
        disposalUnit:'',//处置单位
        disposePlace:'', //处置地点
        startEndTime:'', //时间
        tableData:[],
        page:1,
        limit:10,
        total:0,
        biddingState:'99',//竞价状态val
        biddingStateoptions:[{ // 竞价状态下拉
          value: '99',
          label: '全部'
        },{
          value: '1',
          label: '即将开始'
        }, {
          value: '2',
          label: '进行中'
        },{
          value: '3',
          label: '已成交'
        },{
          value: '4',
          label: '已流拍'
        },{
          value: '5',
          label: '已撤回'
        }],
        value2: '', 
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //定标弹窗
        titleDia:"", //定标弹窗标题
        showWin:false, //定标弹窗显示关闭
        onlyOne:'',
        idRow:"",
        //交割弹窗
        jsIds:'',
        jgShow:false,
        //结算弹窗
        settleShow:false,
        isStatement:null,

        // 买受人评价
        buyerShow:false,
        isScore:null,
      }
    },
    created(){
      this.list();
    },
    methods:{
      list(){
        Ledgerlist({page:this.page,limit:this.limit}).then(res=>{
          //时间-create_time-转时间戳
          this.tableData = res.data;
          this.total = res.count;
        });
      },
      //点击请定标
      picketageStart(row){
        this.idRow = row.id;
        this.onlyOne = row.is_calibration;
        if(row.is_calibration=='5'){
          this.titleDia = '信息';
          this.showWin = true;
        }else if(row.is_calibration=='2'){
          this.showWin = true;
          this.titleDia = '成交信息';


        }
      },
      //关闭定标弹窗
      closePicketage(){
        this.showWin = false;
      },
      successPicketage(){
        this.showWin = false;
        this.list();
      },
      // 交割登记
      jgRegisterBtn(row){
        this.idRow = row.id;
        if(row.is_calibration==2&&row.is_statement==0){
          this.jsIds = false;
        }else if(row.is_calibration==2&&row.is_statement>0){
          this.jsIds = true;
        }
        this.jgShow=true;
      },
      //关闭交割登记弹窗
      closejgRegisterLog(){
        this.jgShow=false;
      },
      //点击结算登记
      settleAccounts(row){
        this.idRow = row.id;
        if(row.is_calibration==2&&row.is_statement==0){
          this.isStatement = true;
        }else if(row.is_calibration==2&&row.is_statement>0){
          this.isStatement = false;
        }
        this.settleShow = true;
      },
      //关闭结算登记
      closeSettleLog(){
        this.settleShow = false;
      },
      // 请评价
      pleaseEvaluate(row){
        this.idRow = row.id;
        if(row.is_score==0){
          this.isScore = false;
        }else if(row.is_score==1){
          this.isScore = true;
        }
        this.buyerShow = true;

      },
      //评价成功
      evaluateSuccess(){
        this.buyerShow = false;
        this.list();
      },
      closeBuyer(){
        this.buyerShow = false;
      },
      // 分页
      handleSizeChange(val) {
        this.limit = val
        this.list()
      },
       // 分页
      handleCurrentChange(val) {
        this.page = val
        this.list()
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .sellerTransaction {
    background-color: #f5f6f7;
    height: calc(100vh - 90px);
    .flowChart{
      display: flex;
      align-items: center;
      gap: 10px;
      .FC_item_img{
        img{
          width: 100%;
          height: 100%;
          background-repeat: no-repeat;
          background-position: 50%;
          background-size: contain;
        }
      }
      .FC_item_set{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
        .word{
          white-space: nowrap;
          margin-top: 4px;
        }
      }
    }
  }
  </style>
  